<template>
    <div>
        <el-row>
            <el-col :span="12" class="sou">
                <span class="na">课程标题:</span>
                <el-input v-model="name" style="width: 240px" clearable />
            </el-col>
            <el-col :span="2">
                <el-button type="primary" @click="sou">
                    搜索
                </el-button>
            </el-col>
        </el-row>
        <el-row style="margin-top: 20px;">
            <el-col :span="3">
                <el-button type="primary" @click="tianjia">
                    添加课程列表
                </el-button>
            </el-col>
        </el-row>
        <el-row class="res">
            <el-col>
                <el-table :data="list" border style="width: 725px">
                    <el-table-column prop="bid" label="ID" label-class-name="header" align="center" />
                    <el-table-column prop="bname" label="名称" label-class-name="header" align="center" />
                    <el-table-column prop="btime" label="时长" label-class-name="header" align="center">
                        <template #default="scope">
                            {{ (scope.row.btime-scope.row.btime%60)/60 > 0 ? (scope.row.btime-scope.row.btime%60)/60+'小时' : '' }}{{ scope.row.btime%60 > 0 ? scope.row.btime%60+'分钟' : '' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" label-class-name="header" align="center">
                        <template #default="scope">
                            <el-button type="text" @click="chan(scope)">编辑</el-button>
                            <el-button type="text" @click="del(scope)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <el-pagination layout="prev, pager, next" :total="num" :current-page="pages" @current-change="chan" />
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="3" :offset="21" class="close">
                <el-button @click="quxiao">
                    返回
                </el-button>
            </el-col>
        </el-row>
        <el-dialog v-model="show" :title="title" :class="{small:title=='提示'}">
            <ShanChu :key="codes" :code="codes" v-if="title=='提示'" @tuichu="delt"></ShanChu>
            <XiuGai :key="codes" :code="codes" :kecheng="info" v-if="title=='编辑课程列表'" @tuichu="changes"></XiuGai>
            <NewList v-if="title=='添加课程列表'" @tuichu="add"></NewList>
        </el-dialog>
    </div>
</template>

<script setup>
    import { defineEmits, defineProps, onMounted, ref, h } from "vue";
    import axios from "axios";
    import qs from "qs";
    import ShanChu from "./ShanChu.vue";
    import XiuGai from "./XiuGai.vue";
    import NewList from "./NewList.vue";

    import { ElMessage } from "element-plus";

    const emites = defineEmits(["tuichu"]);

    const props = defineProps({
        code: {
            type: Number
        }
    });

    let id = ref(props.code);
    let pages = ref(1);
    let num = ref(1);
    let show = ref(false);
    let title = ref("");
    let list = ref([]);
    let codes = ref();
    let info = ref();
    let name = ref("");

    const sou = async function () {
        let res = await axios.get(`/list/show?id=${id.value}&name=${name.value}`);
        list.value = res.data.data;
    };

    const quxiao = function () {
        emites("tuichu");
    };

    const del = function (data) {
        show.value = true;
        title.value = "提示";
        codes = data.row.bid;
    };

    const add = async function (data) {
        show.value = false;
        if (data) {
            await axios.post(
                "list/add",
                qs.stringify({
                    ...data,
                    bKid: props.code
                })
            );
        }
        sou();
    };

    const changes = async function (data) {
        show.value = false;
        if (data) {
            await axios.post(
                "/list/update",
                qs.stringify({
                    ...data
                })
            );
        }
        sou();
    };

    const delt = async function (data) {
        show.value = false;
        if (data) {
            await axios.post(
                "list/delete",
                qs.stringify({
                    ...data
                })
            );
            ElMessage({
                message: h(
                    "div",
                    { style: "width:300px;font-size:15px;color:rgb(99, 185, 129)" },
                    "删除成功!"
                ),
                type: "success"
            });
        } else {
            ElMessage({
                message: h(
                    "div",
                    { style: "width:300px;color:#999;font-size:15px" },
                    "已取消删除"
                )
            });
        }
        sou();
    };

    const chan = async function (data) {
        show.value = true;
        title.value = "编辑课程列表";
        info.value = data.row;
        codes.value = data.row.bid;
    };

    const tianjia = async function () {
        show.value = true;
        title.value = "添加课程列表";
    };

    onMounted(async function () {
        sou();
    });
</script>

<style lang="less" scoped>
    .res {
        margin-top: 20px;
    }

    /deep/ .header {
        background-color: #4f91ff !important;
        color: white;
    }

    .close {
        margin-top: 50px;
        position: relative;
        left: 8px;
    }
</style>